/**
 * @description  : 多选组件
 * @descriptionDetail : 多选组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:23:42
 */
<template>
  <view class="multi-page">
    <theme-navbar
      :isBack="leftBtnOpt.isBack"
      :backText="leftBtnOpt.backText"
      :customBack="customBack"
      :backIconName="leftBtnOpt.backIconName"
      :is-white="false"
      :title="title"
    >
      <view class="nav-right-icon" @click="handlerConfirm">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <u-row
        class="credit-container"
        v-for="(item, idx) in options"
        :key="idx"
        @tap="!isDisabled && handlerSelectItem(item)"
      >
        <u-col :span="hasExts ? 3 : 11" style="padding-right:0;">
          <view :class="[hasExts ? 'title' : 'title-normal']">
            {{ item.name }}
          </view>
        </u-col>
        <u-col span="8" v-if="hasExts">
          <view class="info" v-if="item.exts">
            <span v-for="(ext, extIdx) in item.exts" :key="extIdx">
			   <text :class="ext?'info-item':''">{{ ext }}</text>
			</span>
          </view>
        </u-col>
        <u-col span="1" style="text-align:right;">
          <u-icon
            name="checkbox-mark"
            color="#2979ff"
            size="32"
            v-if="selectedUids.includes(item.uid)"
          ></u-icon>
        </u-col>
        <!-- <u-divider color="#fa3534" half-width="100%"></u-divider> -->
      </u-row>
    </view>
  </view>
</template>

<script>
export default {
  name: "MultiSelect",
  props: {
    /** 
     * {uid: 唯一键, name: 名称, exts: ['额外显示值1','额外显示值2']}
     */
    options: {
      type: Array,
      default: () => [],
    },
    defaultUids: {   // 已选中的uid
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '请选择',
    },
    /**
	 * leftBtnOpt.isBack  是否有返回按钮
	 * leftBtnOpt.backText  返回名字
	 * leftBtnOpt.backFun  返回自定义逻辑
	 */
    leftBtnOpt: {
      type: Object,
      default: () => {
        return {
          isBack:false,
          backText:"",
          backIconName:"",
          backFun:() => {},
        };
      },
    },
    isDisabled:{
      type:Boolean,
      default:false,
    },
	hasExts:{ //默认true
	  type: Boolean,
	  default:true,
	}
  },
  data() {
    return {
      selectedUids: [],     // 选中项的ids
      selectedItems: [],     // 选中项
    };
  },
  created() {
    console.log("初始化", this.defaultUids);
    if (this.defaultUids && this.defaultUids.length > 0) {
      this.selectedUids = this.defaultUids;
      this.options.forEach(o => this.selectedUids.includes(o.uid) && this.selectedItems.push(o));
    }
  },
  methods: {
    // 选中
    handlerSelectItem(item) {
      if (this.selectedUids.includes(item.uid)) {
        this.selectedItems = this.selectedItems.filter(it => it.uid != item.uid);
      } else {
        this.selectedItems.push(item);
      }
      this.selectedUids = [];
      this.selectedItems.forEach(it => this.selectedUids.push(it.uid));
    },
    customBack(){
      this.leftBtnOpt.backFun(this.selectedItems);
    },
    // 确认
    handlerConfirm() {
      this.$emit("select", this.selectedItems);
    },
  },
};
</script>
<style lang="scss" scoped>
.multi-page {
  padding: 10px;
  .nav-right-icon {
    color: #FFF;
    margin-right: 15px;
  }
  .u-checkbox-group {
    width: 100%;
  }
  .credit-container {
    padding: 15px 0;
    border-bottom: 1px solid #e6e6e6;
    .info {
      display: flex;
      align-items: center;
      line-height: 100%;
      color: #999999;
      font-size: 12px;
      .info-item {
        background-color: #EFF3F9;
        border-radius: 5px;
        margin-right: 5px;
        padding: 5px 8px;
      }
    }
  }
  .title {
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
  }
  .title-normal {
    word-break: break-all;
  }
}
</style>